<template>
  <div class="container">
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home/salary/qySalaryList' }">企业人员工资</el-breadcrumb-item>
            <el-breadcrumb-item>企业工资专户</el-breadcrumb-item>
        </el-breadcrumb> -->
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="returnSalaryList"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="164px"
        class="demo-formData"
      >
        <el-row>
          <el-form-item
            prop="bankId"
            label="专户开户行："
            class="row-padding-bottom"
          >
            <el-select
              class="dialogSingleInp"
              v-model="formData.bankId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in bankOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="accountId"
            label="专户账号："
            class="row-padding-bottom"
          >
            <el-input
              v-model="formData.accountId"
              @blur="formData.accountId = changeValue($event)"
              id="accountId"
              placeholder="请填写专户账号"
              class="dialogSingleInp"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="上传银行开户证明："
              v-model="formData.employeeImgUrl"
            >
              <uploadAnnex
                @getFileList="getFileList"
                :limitationFactor="limitationFactor"
                @getFile="getFile"
                :upLoadFile="upLoadFile"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-model="formData.contractImgUrl">
            <uploadResult :resultList="upLoadFile" @callBackResult="getFile" />
            <!-- <elementImage :upLoadFile="upLoadFile"   :srcList="srcList" :oldSrcList="oldSrcList" @changeSrcList="changeSrcList"></elementImage> -->
          </el-col>
        </el-row>
        <el-form-item class="submitBox">
          <el-button
            type="primary"
            @click="submitForm('formData')"
            class="commonBut saveBtn"
            :loading="isSaveLoading"
            >保存更新</el-button
          >
          <el-button class="commonBut" @click="returnSalaryList"
            >返回</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'

export default {
  name: 'salaryAccount',
  data() {
    return {
      titleText: '企业工资专户',
      back: true,
      bankOptions: [], //银行下拉框
      upLoadFile: [],
      oldSrcList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      srcList: [],
      isSaveLoading: false, // 保存loading
      formData: {
        bankId: '',
        accountId: '',
        id: '', //后台返的id
      },
      formRules: {
        bankId: [
          {
            required: true,
            message: '专户开户行不能为空',
            trigger: 'blur',
          },
        ],
        accountId: [
          {
            required: true,
            // pattern: /^([1-9]{1})(\d{11,18})((-)(\d{1,9}))*$/,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
      },
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        messagetip: '仅支持上传png、jpg、jpeg格式文件', //自定义报错提示语
        formatType: 'typeOne', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip: '支持png，jpg，jpeg', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
    }
  },
  created() {
    // 获取银行
    this.getBank()
    // 获取专户初始信息
    this.getOldInfo()
  },
  mounted() {},
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    // 专户保存
    submitForm() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          this.submitFormUptate()
        } else {
          return false
        }
      })
    },
    // 返回工资列表
    returnSalaryList() {
      this.$router.push('/home/salary/qySalaryList')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getBank() {
      var data = {
        type: 'NC_BANK_TYPE',
      }
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: data,
      }).then((response) => {
        this.bankOptions = response.data.result
      })
      // .catch(error => {
      //    this.$message.error("数据获取失败");
      // });
    },
    //获取专户初始信息
    getOldInfo() {
      this.axios({
        method: 'post',
        url: 'api-su/companyaccount/base/findbycomid',
      })
        .then((response) => {
          var data = response.data.result
          this.formData.bankId = data.bankId
          this.formData.accountId = data.accountId
          this.formData.id = data.id
          if (data.files) {
            if (data.files.length > 0) {
              this.upLoadFile = data.files
              for (var i = 0; i < this.upLoadFile.length; i++) {
                this.srcList.push(this.upLoadFile[i].url)
                this.oldSrcList.push(this.upLoadFile[i].url)
              }
            }
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    submitFormUptate() {
      var data = {
        bankId: this.formData.bankId,
        accountId: this.formData.accountId,
        id: this.formData.id,
        files: JSON.stringify(this.upLoadFile),
      }
      this.isSaveLoading = true
      this.axios({
        method: 'post',
        url: 'api-su/companyaccount/expand/addormodify',
        data: data,
      })
        .then((response) => {
          this.isSaveLoading = false
          this.$message({
            message: '保存成功',
            type: 'success',
          })
          this.$refs['formData'].resetFields()
          this.$router.push('/home/salary/qySalaryList')
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/salary/qySalaryList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    getFile(val) {
      this.upLoadFile = val
    },
  },
}
</script>
<style scoped lang="less">
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
}
.container {
  .mainCon {
    // margin: 0 auto;
    top: 198px;
    padding: 40px 20px;
    // text-align: center;
    .labelStyMin {
      padding-left: 0px !important;
      min-width: 130px;
    }
    .labelStyMax {
      padding-left: 0px !important;
      margin-left: 5px;
      min-width: 155px;
    }
    .submitBox {
      text-align: left;
      margin-top: 20px;
    }
    .picStyle {
      width: 116px;
      margin-right: 60px;
      img {
        width: 100%;
      }
    }
    .uploadBox {
      position: relative;
      .uploadImg {
        width: 96px;
        height: 36px;
        color: #009588;
        border: 1px solid #009588;
        line-height: 10px;
      }
      .uploadImgState {
        font-size: 14px;
        color: #999999;
        margin-left: 12px;
      }
      .upLoadDom {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        input {
          width: 100px;
          height: 36px;
          cursor: pointer;
        }
      }
    }
    .imgStyle {
      padding-left: 130px;
      li {
        position: relative;
        margin-right: 20px;
        margin-top: 10px;
        i {
          position: absolute;
          right: -6px;
          top: -10px;
          font-size: 20px;
        }
      }
    }
  }
}
form.el-form.demo-formData {
  width: 450px;
  display: inline-block;
  text-align: left;
  .selectWidth {
    width: 100%;
  }
}
// .el-main .el-form-item {
//     margin-bottom: 20px;
// }
.saveBtn {
  background-color: #009588;
  border-color: #009588;
  color: #fff;
}
</style>
